<script setup lang="ts">
import { EVirtualList } from 'exploria-ui';
import { computed, ref } from 'vue';

const length = ref(100);

const data = computed(() =>
    Array.from({ length: length.value }, (_, index) => {
        return {
            rowKey: index,
            name: 'name' + index,
        };
    }),
);
</script>

<template>
    <div class="dynamic-data">
        <button @click="length++">添加数据</button>
        数据长度: {{ data.length }}
        <EVirtualList :data="data" :container-height="150" :item-height="30">
            <template #row="{ row }">
                <div class="list-item">{{ row.name }}</div>
            </template>
        </EVirtualList>
    </div>
</template>

<style scoped lang="scss">
.dynamic-data {
    .e-virtual-list {
        .list-item {
            height: 100%;
            background-color: #99bef6;
        }
    }
}
</style>
